<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-input
          type="text"
          placeholder="请输入前缀，例如P、PS等"
          :maxlength="5"
          :minlength="1"
          :value="prefix"
          clearable
          @input="handleInput"
        />
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="year"
          placeholder="请选择年规则"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="month"
          placeholder="请选择月日规则"
        >
          <el-option
            v-for="item in monthOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="suffix"
          placeholder="请选择后缀"
        >
          <el-option
            v-for="item in suffixOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="24">
        示例：{{ valueShowText }}
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {cloneJson, parseTime} from "@/utils";
/**
 * 生成序列号组件
 * @author maolin
 */
export default {
  name: "ErpFormSerialNumRule",
  components: {
  },
  props: {
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
  },
  data () {
    return {
      prefix: "",
      year: "yy",
      month: "MMdd",
      suffix: "3",
      yearOptions: [
        {label: "两位年", value: "yy"},
        {label: "四位年", value: "yyyy"},
      ],
      monthOptions: [
        {label: "无", value: ""},
        {label: "月", value: "MM"},
        {label: "月日", value: "MMdd"},
      ],
      suffixOptions: [
        {label: "001", value: "3"},
        {label: "0001", value: "4"},
        {label: "00001", value: "5"},
        {label: "000001", value: "6"},
        {label: "0000001", value: "7"},
      ]
    };
  },
  computed: {
    valueShowText () {
      let value = cloneJson(this.value);
      if (!value) {
        return "";
      }
      let prefix = "";
      let prefixLength = value.substr(0, 1);
      if (!isNaN(prefixLength)) {
        prefixLength = parseInt(prefixLength);
        prefix = value.substr(1, prefixLength);
      }
      let year = value.substring(prefixLength + 1, prefixLength + 5);
      if (year !== 'yyyy') {
        year = value.substring(prefixLength + 1, prefixLength + 3);
        if (year !== 'yy') {
          year = '';
        }
      }
      let yearLength = year.length;
      let month = value.substring(prefixLength + yearLength + 1, value.length - 1);
      const timestamp = (new Date()).getTime();
      // 四位年
      let yearStr = parseTime(timestamp, "{y}");
      if (year.length === 2) {
        // 两位年
        yearStr = yearStr.substr(2);
      }
      // 无月日
      let monthStr = '';
      if (month.length === 4) {
        // 只有月日
        monthStr = parseTime(timestamp, "{m}{d}");
      } else if (month.length === 2) {
        // 只有月
        monthStr = parseTime(timestamp, "{m}");
      }
      let suffix = value.substr(-1,1);
      let suffixStr = "";
      if (this.suffixOptions && this.suffixOptions.length > 0) {
        for (let i in this.suffixOptions) {
          if (this.suffixOptions[i].value == suffix) {
            suffixStr = this.suffixOptions[i].label;
            break;
          }
        }
      }
      return prefix + yearStr + monthStr + suffixStr;
    }
  },
  watch: {
    suffix (suffix) {
      let reg = /[^a-zA-Z0-9]/g;
      if (reg.test(suffix)) {
        this.prefix = "";
      }
      this.changeValue();
    },
    prefix () {
      this.changeValue();
    },
    year () {
      this.changeValue();
    },
    month () {
      this.changeValue();
    },
    value: {
      handler (value) {
        if (!value) {
          return false;
        }
        let prefix = "";
        let prefixLength = value.substr(0, 1);
        if (!isNaN(prefixLength)) {
          prefixLength = parseInt(prefixLength);
          prefix = value.substr(1, prefixLength);
        }
        let year = value.substring(prefixLength + 1, prefixLength + 5);
        if (year !== 'yyyy') {
          year = value.substring(prefixLength + 1, prefixLength + 3);
          if (year !== 'yy') {
            year = '';
          }
        }

        let yearLength = year.length;
        let month = value.substring(prefixLength + yearLength + 1, value.length - 1);
        let suffix = value.substr(-1,1);
        this.prefix = prefix;
        this.year = year;
        this.month = month;
        this.suffix = suffix;
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 改变值，输入前缀或选择日期格式或选择N位流水号触发
     * @private
     */
    changeValue () {
      let value = "";
      if (this.prefix) {
        value += (this.prefix.length).toString() + this.prefix;
      }
      if (this.year) {
        value += this.year;
      }
      if (this.month) {
        value += this.month;
      }
      if (this.suffix) {
        value += this.suffix;
      }
      this.handleValueChange(value);
    },
    /**
     * 更新值
     * @private
     * @param val
     */
    handleValueChange (val) {
      this.$emit('value-change', val);
    },
    /**
     * 控制前缀输入，正则验证
     * @param e
     * @private
     */
    handleInput (e) {
      this.prefix = e.replace(/[^a-zA-Z]/g,"");
    }
  }
};
</script>

<style scoped>

</style>
